<script setup lang="ts">
import { ref } from 'vue'
import CheckboxComponent from './components/CheckboxComponent.vue'

const options = ref([
  { id: 'option1', label: 'Option 1', value: false, disabled: false },
  {
    id: 'option2',
    label: 'Option 2',
    value: true,
    disabled: false
  },
  {
    id: 'option3',
    label: 'Option 3',
    value: false,
    disabled: true
  },
  {
    id: 'option4',
    label: 'Option 4',
    value: false,
    disabled: false
  },
  {
    id: 'option5',
    label: 'Option 5',
    value: false,
    disabled: false
  }
])

const singleSelect = ref(false)
const selectedItems = ref([])

const handleButtonState = (isChecked: boolean) => {
  console.log('Button state:', isChecked)
}

const handleSelectedItems = (items: string[]) => {
  console.log('Selected items:', items)
}
</script>

<template>
  <header class="grid grid-cols-3 w-full justify-center items-center p-4 shadow-md mb-8">
    <div class="justify-self-start flex items-center space-x-2 text-indigo-900">
      <h1>WayTale</h1>
    </div>
    <div class="w-full flex space-x-4 justify-center"></div>
  </header>

  <main class="px-8">
    <CheckboxComponent
      v-for="option in options"
      :key="option.id"
      :id="option.id"
      :label="option.label"
      :value="option.value"
      :disabled="option.disabled"
      :single-select="singleSelect"
      :selected="selectedItems"
      @button-state="handleButtonState"
      @selected-items="handleSelectedItems"
    />
  </main>
</template>
